/*
 * @Description: 
 * @Version: 2.0
 * @Author: 
 * @Date: 2022-04-01 11:48:05
 * @LastEditors: cxc
 * @LastEditTime: 2022-04-06 16:39:04
 */
import './../../../views/employee/RoleAuthorization.css'
import React, { useState, } from 'react'
import { Modal, Input, Table, Space, Button, Radio } from 'antd';

import {
  QuestionCircleOutlined,
  UsergroupDeleteOutlined,
  CheckOutlined
} from '@ant-design/icons';

export default function RoleAuthModal(props) {
  const { title, visible, onOk, onCancel, } = props

  const columns = [
    {
      title: '新增角色',
      width: 120,
      colSpan: 4,
      dataIndex: 'name',
    },
    {
      dataIndex: 'second',
      width: 200,
      className: 'role_modal_table_input',
      render: (text, row, index) => {
        if (index === 0) {
          return <Input></Input>
        } else if (index === 1) {
          return <span>0</span>
        } else if (index === 2) {
          return <>
            <Radio.Group onChange={onChange} value={isSync}>
              <Radio value={1}>是</Radio>
              <Radio value={0}>否</Radio>
            </Radio.Group>
          </>
        }
      },
    },
    {
      dataIndex: 'three',
      width: 220,
      className: 'role_modal_table_func_note'
    },
    {
      dataIndex: 'note',
      width: 300,
      onCell: (_, index) => ({
        colSpan: index === 0 ? 4 : 5,
        rowSpan: index === 0 ? 3 : 5,
      }),
    },
  ];

  const data = [
    {
      key: '01',
      name: '角色名称',
      second: 12,
      three: (<><QuestionCircleOutlined /><span>如销售经理</span></>),
      note: '暂无备注'
    },
    {
      key: '02',
      name: '自定义图标权限',
      second: 11,
      three: (<><Button className='role_modal_table_func_note_btn'>选择图标</Button><QuestionCircleOutlined /><span>默认</span><span>0为不限</span></>),
    },
    {
      key: '03',
      name: '是否同步',
      second: 1,
      address: 'Sidney No. 1 Lake Park',
    },

  ];

  const roleLists = [
    {
      pageRoleId: 0,
      title: '客户管理',
      icon: <UsergroupDeleteOutlined />,
      roles: [
        {
          functionId: 0,
          name: '查看',
          isChecked: false
        },
        {
          functionId: 1,
          name: '新增',
          isChecked: false
        },
        {
          functionId: 2,
          name: '修改',
          isChecked: false
        },
        {
          functionId: 3,
          name: '删除',
          isChecked: false
        },
        {
          functionId: 4,
          name: '共享',
          isChecked: false
        },
        {
          functionId: 5,
          name: '转移',
          isChecked: false
        },
        {
          functionId: 6,
          name: '变更业务员',
          isChecked: false
        },
        {
          functionId: 7,
          name: '转入公海',
          isChecked: false
        },
        {
          functionId: 8,
          name: '保护期设置',
          isChecked: false
        },
        {
          functionId: 9,
          name: '非自己的客户隐藏手机号',
          isChecked: false
        },
      ]
    },
    {
      pageRoleId: 0,
      title: '客户管理',
      icon: <UsergroupDeleteOutlined />,
      roles: [
        {
          functionId: 0,
          name: '查看',
          isChecked: false
        },
        {
          functionId: 1,
          name: '新增',
          isChecked: false
        },
        {
          functionId: 2,
          name: '修改',
          isChecked: false
        },
        {
          functionId: 3,
          name: '删除',
          isChecked: false
        },
        {
          functionId: 4,
          name: '共享',
          isChecked: false
        },
        {
          functionId: 5,
          name: '转移',
          isChecked: false
        },
        {
          functionId: 6,
          name: '变更业务员',
          isChecked: false
        },
        {
          functionId: 7,
          name: '转入公海',
          isChecked: false
        },
        {
          functionId: 8,
          name: '保护期设置',
          isChecked: false
        },
        {
          functionId: 9,
          name: '非自己的客户隐藏手机号',
          isChecked: false
        },
      ]
    },
    {
      pageRoleId: 0,
      title: '客户管理',
      icon: <UsergroupDeleteOutlined />,
      roles: [
        {
          functionId: 0,
          name: '查看',
          isChecked: false
        },
        {
          functionId: 1,
          name: '新增',
          isChecked: false
        },
        {
          functionId: 2,
          name: '修改',
          isChecked: false
        },
        {
          functionId: 3,
          name: '删除',
          isChecked: false
        },
        {
          functionId: 4,
          name: '共享',
          isChecked: false
        },
        {
          functionId: 5,
          name: '转移',
          isChecked: false
        },
        {
          functionId: 6,
          name: '变更业务员',
          isChecked: false
        },
        {
          functionId: 7,
          name: '转入公海',
          isChecked: false
        },
        {
          functionId: 8,
          name: '保护期设置',
          isChecked: false
        },
        {
          functionId: 9,
          name: '非自己的客户隐藏手机号',
          isChecked: false
        },
      ]
    },
    {
      pageRoleId: 0,
      title: '客户管理',
      icon: <UsergroupDeleteOutlined />,
      roles: [
        {
          functionId: 0,
          name: '查看',
          isChecked: false
        },
        {
          functionId: 1,
          name: '新增',
          isChecked: false
        },
        {
          functionId: 2,
          name: '修改',
          isChecked: false
        },
        {
          functionId: 3,
          name: '删除',
          isChecked: false
        },
        {
          functionId: 4,
          name: '共享',
          isChecked: false
        },
        {
          functionId: 5,
          name: '转移',
          isChecked: false
        },
        {
          functionId: 6,
          name: '变更业务员',
          isChecked: false
        },
        {
          functionId: 7,
          name: '转入公海',
          isChecked: false
        },
        {
          functionId: 8,
          name: '保护期设置',
          isChecked: false
        },
        {
          functionId: 9,
          name: '非自己的客户隐藏手机号',
          isChecked: false
        },
      ]
    },
    {
      pageRoleId: 0,
      title: '客户管理',
      icon: <UsergroupDeleteOutlined />,
      roles: [
        {
          functionId: 0,
          name: '查看',
          isChecked: false
        },
        {
          functionId: 1,
          name: '新增',
          isChecked: false
        },
        {
          functionId: 2,
          name: '修改',
          isChecked: false
        },
        {
          functionId: 3,
          name: '删除',
          isChecked: false
        },
        {
          functionId: 4,
          name: '共享',
          isChecked: false
        },
        {
          functionId: 5,
          name: '转移',
          isChecked: false
        },
        {
          functionId: 6,
          name: '变更业务员',
          isChecked: false
        },
        {
          functionId: 7,
          name: '转入公海',
          isChecked: false
        },
        {
          functionId: 8,
          name: '保护期设置',
          isChecked: false
        },
        {
          functionId: 9,
          name: '非自己的客户隐藏手机号',
          isChecked: false
        },
      ]
    },

  ]
  const [roleList, setRoleList] = useState(roleLists)
  const [isSync, setIsSync] = React.useState(1);
  // 是否同步
  const onChange = e => {
    console.log('radio checked', e.target.value);
    setIsSync(e.target.value);
  };
  // 功能权限点击
  function handleFunctionRole(item) {
    item.isChecked = !item.isChecked
    setRoleList([...roleList])
  }
  return (
    <>
      {/* 对话框 */}
      {/* 新增角色 */}
      <div className='role_modal_wrap'>
        <Modal className='role_auth'
          style={{ width: '1270px' }}
          destroyOnClose='true'
          cancelText='关闭'
          okText='保存'
          centered='true'
          title={title}
          visible={visible}
          onOk={onOk}
          onCancel={onCancel} >
          <Table
            className='role_modal_table'
            pagination={{ position: ['none', 'none'] }}
            columns={columns}
            dataSource={data}
            bordered />
          <h3 className='role_modal_func_title'>详细权限</h3>
          {
            roleList.map(item1 => {
              return (
                <div className='pageRole_wrap' key={item1.pageRoleId}>
                  <div className='pageRole_title'>
                    <Space size={5}>
                      <span className='pageRole_title_icon'>{item1.icon}</span>
                      <span>{item1.title}</span>
                    </Space>
                  </div>
                  {
                    item1.roles.map(item2 => {
                      return (
                        <div key={item2.functionId} className='function_title' onClick={() => { handleFunctionRole(item2) }}>
                          {item2.isChecked === true ? (<div className='function_title_icon_wrap'>
                            <CheckOutlined className='function_title_icon' />
                          </div>) : <></>}
                          {item2.name}
                        </div>
                      )
                    })
                  }
                </div>
              )
            })
          }
        </Modal>
      </div>

    </>
  )
}

